<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
        body{

        }
        .spn{
            color: red;
        }
        #center{
            display: flex;
            justify-content: space-around;
        }
        #center div p{
            font-size: 15px;
        }
        .btn{
            width: 70px;
            height: 34px;
            background: blue;
            color: #fff;
            font-size: 15px;
            /*margin: 0;*/
            padding: 0;
        }
        #list{
            width: 100%;
            height: 100%;
            clear: both;
        }
    </style>
</head>
<body >

<div id="list">
<script id="tpl1" type="text/html">
{{each data as key i}}
    <section class="aui-content">
    <div class="aui-card-list">
        <div class="aui-card-list-header">
           <p> {{key.title}} <span class="spn">{{key.is_sale}}</span><p>
        </div>
        <div class="aui-card-list-content-padded" id="center">
            <div>
                <p class="spn">{{key.yqsyl}}<p>
                <p>预计收益率</p>
            </div>
            <div>
                <p class="spn">{{key.tzqx}}</p>
                <p>投资期限</p>
            </div>
            <div>
                <p class="spn">{{key.qtje}}</p>
                <p>起头金额</p>
            </div>
             <div>
                <button class="btn">购买预约</button>
            </div>
        </div>
    </div>
{{/each}}
</section>
</script>

</div>


</body>
<script type="text/javascript" src="../script/api.js"></script>
 <script type="text/javascript" src="../script/template.js"></script>
  <script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript">
    apiready = function(){
            api.ajax({
                url: 'http://linux.daxiangclass.com:3000/mock/227/api/v1/product',
                method: 'get',
                datatype:'json',
            },function(ret, err){
                if (ret) {
                    var data = ret.data
                    // alert( JSON.stringify( ret ) );
                     $('#list').html(template("tpl1",{data:data}))

                } else {
                    // alert( JSON.stringify( err ) );
                  	 $api.toast('网络错误','正在连接...',500);
                }
            });

            api.setRefreshHeaderInfo({
              visible: true,
              loadingImg: 'widget://image/refresh.png',
              bgColor: '#f0f0f0',
              textColor: '#888',
              textDown: '下拉刷新...',
              textUp: '松开刷新...',
              showTime: true
            }, function(ret, err) {
              setTimeout(function(){
              api.refreshHeaderLoadDone();

             },1000)
            });
    };
</script>
</html>
